/**
 * @author:linjiye
 * @date:2025/1/5
 * @desc:
 **/

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import FcTextInput from "@/components/FcTextInput";
import PageTabBar from "@/components/PageTabBar";
import KeywordHighlighter from "@/components/KeywordHighlighter";
import NoData from "@/components/NoData";
import FcButton from "@/components/FcButton";
import {useRouter} from "expo-router";
import FormTitle from "@/components/FormTitle";
import {Flex, Toast} from "@ant-design/react-native";
import FcModal from "@/components/FcModal";
import { useLocalSearchParams } from 'expo-router';
import {useAddGroupMutation, useGetParentListQuery} from "@/store/api/aiOriginality/aiOriginalityApi";
import {useDispatch, useSelector} from "react-redux";
import {set_pageRouterParams} from "@/store/reducer/aiFeeding/aiFeedingSlice";
import {useAddLabelMutation, useLabelListQuery} from "@/store/api/aiFeeding/aiFeedingApi";

type Props = {}

const groupList = (props: Props) => {
    const router = useRouter();
    const dispatch = useDispatch();
    let p = useSelector(state => state.aiFeeding.pageRouterParams)

    const [searchText, setSearchText] = useState('')
    const [list, setList] = useState([])
    const [isAdd,setIsAdd] = useState(false)
    const [typeList, setTypeList] = useState([
        {
            name: '提供产品',
            id: 1,
        },{
            name: '提供服务',
            id: 2,
        },{
            name: '经营场景',
            id: 3,
        }
    ])
    const [typeId, setTypeId] = useState(typeList[0]?.id)
    const [tapName, setTapName] = useState('')

    const [addLabelFun] = useAddLabelMutation()
    const {data:labelData,isSuccess:labelSuccess,refetch:labelRefetch} = useLabelListQuery({
        name: '',
        pageSize: 1000
    })

    useEffect(() => {
        if (labelData) {
            setList(labelData?.result?.records || [])
        }
    },[labelData])

    function handleAddLabel() {
        addLabelFun({
            name:tapName,
        }).then(res => {
            console.log(res);
            if(res.data.code === 200) {
                Toast.info('添加成功')
                setTapName('')
                setIsAdd(false)
                labelRefetch()
            }
        })
    }

    function handleSelectItem(item: any,index: number) {

        dispatch(set_pageRouterParams({
            ...p,
            val: item,
            groupIndex:index,
        }))

        router.back();
    }

    return (
        <PageScrollView
            isTransparentTab
            pageTab={
                <PageTabBar
                    style={{marginVertical: 10}}
                    title={'标签列表'}
                    right={
                        <View style={{flexDirection: 'row'}}>
                            {list?.length > 0 &&
                                <TouchableOpacity style={[styles.tabBar_btn_wrap,{marginRight: 4,width: 48}]} onPress={() => router.push('/aiFeeding/editTap')}>
                                    <Text style={styles.tabBar_btn}>编辑</Text>
                                </TouchableOpacity>
                            }
                            <TouchableOpacity style={styles.tabBar_btn_wrap} onPress={() => setIsAdd(true)}>
                                <Text style={styles.tabBar_btn}>新增标签</Text>
                            </TouchableOpacity>
                        </View>

                    }
                />
            }
            pageHeader={
                <FcTextInput type='search' text={searchText} placeholder={'请输入要搜索的内容'}
                             onChangeText={setSearchText}
                             style={{marginHorizontal: 16,marginTop: 16}}
                             bodyStyle={{backgroundColor: 'white'}}
                             height={40}/>
            }
        >
            <View>
                <TouchableOpacity onPress={() => handleSelectItem({name: '全部标签',id:null},0)}>
                <View style={styles.search_item_wrap}>
                    <KeywordHighlighter
                        text="全部标签"
                        keywords=""
                        textStyle={styles.search_text}
                        textHeightLightStyle={{color: '#2856FF'}}
                    />
                </View>
            </TouchableOpacity>
                <TouchableOpacity onPress={() => handleSelectItem({name: '无标签',id:0},1)}>
                <View style={styles.search_item_wrap}>
                    <KeywordHighlighter
                        text="无标签"
                        keywords=""
                        textStyle={styles.search_text}
                        textHeightLightStyle={{color: '#2856FF'}}
                    />
                </View>
                    </TouchableOpacity>
                {list?.map((item, index) => (
                    <TouchableOpacity onPress={() => handleSelectItem(item,index+2)}>
                        <View style={styles.search_item_wrap}>
                            <KeywordHighlighter
                                text={item.name}
                                keywords={searchText}
                                textStyle={styles.search_text}
                                textHeightLightStyle={{color: '#2856FF'}}
                            />
                            {/*<Text style={{color: 'rgba(0,0,0,0.5)'}}>({item.count})</Text>*/}
                        </View>
                    </TouchableOpacity>
                ))}
                {list?.length <= 0 &&
                    <View style={{
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        paddingTop: 60,
                        paddingBottom: 120
                    }}>
                        <NoData hintText='暂无标签'/>
                        <FcButton
                            onClick={() => setIsAdd(true)}
                            type='BjJB'
                            colors={['#6989FF', '#C65EFD']}
                            style={{width: 74, height: 32, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8}}
                            textName='去新增'></FcButton>
                    </View>
                }
            </View>

            {/*<FcModal*/}
            {/*    isOpen={isAdd}*/}
            {/*    transparent*/}
            {/*    closeShow={false}*/}
            {/*    animationType='fade'*/}
            {/*    onFcModalClose={() => setIsAdd(false)}*/}
            {/*    style={styles.modal_default}*/}
            {/*    titleText={'新增分组'}*/}
            {/*    titleBottomBorderWidth={0}*/}
            {/*    footer={[*/}
            {/*        {*/}
            {/*            text: '取消',*/}
            {/*            onPress: () => setIsAdd(false),*/}
            {/*            style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },*/}
            {/*        },*/}
            {/*        {*/}
            {/*            text: '确认',*/}
            {/*            onPress: () => addGroupName(),*/}
            {/*            style: { color: '#2856FF',fontSize: 17 },*/}
            {/*        },*/}
            {/*    ]}*/}
            {/*>*/}
            {/*    <View style={{paddingBottom: 20}}>*/}
            {/*        <FormTitle style={{paddingTop: 0}} isLeftIcon title='选择类目' />*/}
            {/*        <Flex wrap='wrap' style={styles.type_menu}>*/}
            {/*            {typeList?.map((item, index) =>*/}
            {/*                <View key={index}>*/}
            {/*                    <FcButton*/}
            {/*                        onClick={() => handleType(item)}*/}
            {/*                        type={typeId === item.id ? 'txtJBAndBkJB' : 'default'}*/}
            {/*                        style={[styles.type_menu_item]}*/}
            {/*                        itemStyle={{width: '100%', height: '100%', borderRadius: 8}}*/}
            {/*                        textName={item.name} borderWidth={1}></FcButton>*/}
            {/*                </View>*/}
            {/*            )}*/}
            {/*        </Flex>*/}
            {/*        <FcTextInput text={groupName} placeholder={'请输入分组名称'}*/}
            {/*                     onChangeText={setGroupName}*/}
            {/*                     height={56}/>*/}
            {/*    </View>*/}
            {/*</FcModal>*/}
            <FcModal
                isOpen={isAdd}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsAdd(false)}
                style={styles.modal_default}
                titleText={'新增标签'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsAdd(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => handleAddLabel(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput text={tapName} placeholder={'请输入标签名称'}
                                 onChangeText={setTapName}
                                 height={56}/>
                </View>
            </FcModal>
        </PageScrollView>
    )
}

export default groupList

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        borderRadius: 8,
        paddingHorizontal: 16,
    },
    tabBar_btn_wrap: {
        width: 64,
        height: 28,
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 8,
        backgroundColor: 'white'
    },
    tabBar_btn: {
        fontSize: 12,
        color: '#2856FF',
    },
    search_item_wrap: {
        flexDirection: 'row',
        minHeight: 56,
        display: 'flex',
        alignItems: "center",
        borderBottomColor: 'rgba(0,0,0,0.1)',
        borderBottomWidth: 0.5,
    },
    search_text: {
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 17,
    },
    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
    },

    type_menu: {
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
        marginLeft: -3,
        marginBottom: 16
    },
    type_menu_item: {
        width: 78,
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 3,
        marginBottom: 6
    },
})